<template>
	<view class="root">
		<view class="navigation">
			<label
				@click="switchNav(index)"
				:class="{ active: index === activeNavIndex }"
				v-for="(nav, index) in navigation"
				:key="index"
			>
				{{ nav }}
			</label>
		</view>

		<scroll-view @scrolltolower="getData" scroll-y class="orders">
			<view class="order-box">
				<view
					v-for="order in orders.list"
					:key="order.id"
					@click="selectOrder(order)"
					hover-class="tap-hover"
					hover-stay-time="100"
					class="order"
				>
					<label class="title">
						<text>{{ order.carType }}</text>
						<label>
							<text>{{ order.statusName }}</text>
							<image
								class="icon-more"
								src="/static/images/icon-more.png"
							/>
						</label>
					</label>
					<view class="info">
						<label class="gray">{{ order.time }}</label>
						<view class="address">
							<label class="green">起始地：</label>
							<text class="name">{{ order.startPoint }}</text>
						</view>
						<view class="address">
							<label class="blue">目的地：</label>
							<text class="name">{{ order.destination }}</text>
						</view>
					</view>
				</view>
			</view>
			<load-more :status="loadStatus" />
		</scroll-view>
	</view>
</template>

<script lang="ts">
	import Vue from "vue";
	import Component from "vue-class-component";
	import { Order as OrderInterface, Pager, UserInfo } from "@/common/api.d";
	import { rand, Storage } from "../libs/utils";
	import loadMore from "../components/load-more.vue";

	let debounce: boolean = false;
	const userInfo: UserInfo = Storage.get("userInfo");

	@Component({ components: { loadMore } })
	export default class Order extends Vue {
		navigation: string[] = ["待接单", "进行中", "已完成", "已取消"];

		activeNavIndex: number = -1;
		orders: Pager<OrderInterface> = {
			nextPage: 1,
			list: [],
		};

		loadStatus: string = "loading";

		private onLoad({ type }: { type: string }): void {
			this.activeNavIndex = +type;
			this.getData();
		}

		public getData(): void {
			if (debounce || !this.orders.nextPage) return;
			debounce = true;
			this.loadStatus = "loading";

			this.request
				.get(
					`/api/myOrder${
						isNaN(this.activeNavIndex)
							? ""
							: "?status=" + this.activeNavIndex
					}`
				)
				.then(({ data }) => {
					this.orders.list.push(...data.list);
					this.orders.nextPage = +data.nextPage;
					this.loadStatus = +data.nextPage ? "more" : "noMore";
					debounce = false;
				});
		}

		public switchNav(index: number): void {
			this.activeNavIndex = index;
			this.orders = { nextPage: 1, list: [] };
			this.getData();
		}

		public selectOrder(order: OrderInterface): void {
			const driver_status = {
				/* 等待乘客拼车 */
				"0": `orderHall?order_id=${order.id}`,
				/* 依次接送乘客 */
				"1": `travel?order_id=${order.id}&status=1`,
				/* 接到部分乘客 */
				"2": `travel?order_id=${order.id}&status=3`,
				/* 接完所有乘客 */
				"3": `travel?order_id=${order.id}&status=5`,
				/* 已到达目的地 */
				"4": "",
			};

			const passenger_status = {
				/* 取消订单 */
				"-1": "",
				/* 待接单 */
				"0": `orderHall?order_id=${order.id}`,
				/* 等候预约时间 */
				"1": `travel?order_id=${order.id}&status=2`,
				/* 准备上车 */
				"2": `travel?order_id=${order.id}&status=4`,
				/* 已上车 */
				"3": `travel?order_id=${order.id}&status=6`,
				/* 等待支付 */
				"4": `travel?order_id=${order.id}&status=7`,
				/* 完成订单 */
				"5": `orderInfo?order_id=${order.id}`,
			};

			const status: { [key: string]: any } = userInfo.identity
				? driver_status
				: passenger_status;

			const url: undefined | string = status[order.status.toString()];

			url && uni.navigateTo({ url });
		}
	}
</script>   

<style lang="css">
	page {
		height: 100%;
	}
</style>
<style lang="scss" scoped>
	.root {
		overflow: hidden;
		flex: 1;
		.icon-more {
			margin-left: 10rpx;
			width: 10rpx;
			height: 18rpx;
		}
		> .navigation {
			flex-direction: row;
			justify-content: space-evenly;
			> label {
				flex-direction: column;
				justify-content: center;

				font-size: 32rpx;
				color: #1b1b1b;
				padding: 20rpx;
				&.active::after {
					content: "";
					margin-top: 5px;
					width: 100%;
					height: 8rpx;
					border-radius: 8rpx;
					background-color: #5487e5;
				}
			}
		}
		> .orders {
			overflow: hidden;
			flex: 1;
			margin-bottom: 44rpx;
			.order {
				border: 2rpx solid #eee;
				border-radius: 10rpx;
				padding: 30rpx;
				margin: 5px 30rpx;
				font-size: 26rpx;
				color: #666;
				.title {
					> text {
						color: #1b1b1b;
						font-size: 28rpx;
					}
					justify-content: space-between;
				}
				.info {
					margin-top: 18rpx;
					line-height: 1.8;
					.address {
						flex-direction: row;
						align-items: flex-start;
					}
					.gray,
					.green,
					.blue {
						&::before {
							content: "";
							margin-right: 18rpx;
							border-radius: 50%;
							width: 10rpx;
							height: 10rpx;
						}
					}
					.gray::before {
						background-color: #b5b5b5;
					}
					.green::before {
						background-color: #00ad84;
					}
					.blue::before {
						background-color: #4888e1;
					}
					.name {
						margin-left: 12rpx;
						flex: 1;
					}
				}
			}
		}
	}
</style>